<template>
  <div class="mainwrap dangan">
    <div class="infotitview">
      <img class="infoincon" :src="infoIcon" alt="" />
      <div class="titinfo">
        <p class="p1">宝贝档案</p>
        <p class="p2">有助于分析宝贝当前状况</p>
      </div>
    </div>
    <div class="maincontent havebottom">
      <div class="babyinfo">
        <div class="nameview">
          <p class="p1">孩子姓名或昵称</p>
          <input
            type="text"
            v-model="info.name"
            class="inputtext"
            placeholder="请输入孩子姓名或昵称"
          />
        </div>
        <div class="nameview">
          <p class="p1">出生年/月</p>
          <van-field
            class="inputtext"
            v-model="info.birth"
            readonly
            name="datePicker"
            placeholder="点击选择时间"
            @click="showPicker = true"
          />
        </div>
        <div class="nameview genderview">
          <p class="p1">性别</p>
          <div class="gendeoption">
            <div :class="{ 'boyview option': true, seled: info.gender == 1 }">
              <label for="boy">
                <div class="optioninner">
                  <p class="boyimg headimg"></p>
                  <div class="radioview">
                    <input
                      type="radio"
                      v-model="info.gender"
                      value="1"
                      name="sex"
                      id="boy"
                      class="hidden-radio"
                    />
                    <span class="radio-button"></span>
                    <p>男宝</p>
                  </div>
                </div>
              </label>
            </div>
            <div :class="{ 'girlview option': true, seled: info.gender == 2 }">
              <label for="girl">
                <div class="optioninner">
                  <p class="girlimg headimg"></p>
                  <div class="radioview">
                    <input
                      type="radio"
                      v-model="info.gender"
                      value="2"
                      name="sex"
                      id="girl"
                      class="hidden-radio"
                    />
                    <span class="radio-button"></span>
                    <p>女宝</p>
                  </div>
                </div>
              </label>
            </div>
          </div>
        </div>
        <div class="nameview">
          <p class="p1">联系方式</p>
          <input
            type="text"
            v-model="info.phone"
            maxlength="11"
            class="inputtext"
            placeholder="请输入联系电话"
          />
        </div>
        <div class="nextbtnview">
          <van-button
            class="btnbox"
            type="primary"
            :loading="saveInfoLoading"
            loading-text="请稍候..."
            @click="gotoMain"
            >开始答题 ></van-button
          >
        </div>
      </div>
    </div>
  </div>
  <van-popup v-model:show="showPicker" position="bottom" overlay-class="test" teleport="body">
    <van-date-picker :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" @cancel="showPicker = false" />
  </van-popup>
</template>

<script setup>
import api from "../api";
import { showNotify, showFailToast } from "vant";
import infoIcon from "../assets/img/infoicon.png";

const route = useRoute();
const router = useRouter();
const infoStore = useInfoStore();

const saveInfoLoading = ref(false);
const showPicker = ref(false);

const minDate = new Date(2010, 0, 1)
var currentDate = new Date();
// 将日期设置为前一天
currentDate.setDate(currentDate.getDate() - 1);
const maxDate = currentDate

const info = reactive(Object.assign({}, infoStore.info));

const onConfirm = ({ selectedValues }) => {
  info.birth = selectedValues.join("-");
  showPicker.value = false;
};

const gotoMain = () => {
  if (info.name == "") {
    showNotify({
      message: "请填写宝宝姓名或昵称~",
      color: "#fff",
      background: "red",
    });
    // showNotify('');
    return false;
  }

  if (info.phone == "") {
    showNotify({
      message: "请填写您的联系方式~",
      color: "#fff",
      background: "red",
    });
    return false;
  }

  infoStore.setUserInfo(info);
  api
    .saveUserInfo(info)
    .then((res) => {
      if (res.code === 200) {
        infoStore.setUserId(res.data.user_id);
        router.replace("/main");
      } else {
        showFailToast({
          message: res.message,
        });
      }
    })
    .finally((_) => {
      saveInfoLoading.value = false;
    });
};

onMounted(() => {});
</script>
<style>
</style>
<style scoped>
</style>